<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D旅行日历 - 慢生活 · 旅行日记</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#6A0DAD', // 深紫色作为主色调
            secondary: '#FF6EC7', // 亮粉色作为辅助色
            neutral: '#F8F9FA', // 浅灰色作为中性色
            dark: '#212529', // 深灰色作为文字颜色
            accent: '#00BFFF', // 亮蓝色作为强调色
            success: '#4CAF50', // 成功色
            info: '#2196F3', // 信息色
            warning: '#FF9800', // 警告色
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
      }
      .calendar-container {
        perspective: 2000px;
      }
      .calendar-grid {
        transform-style: preserve-3d;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 1rem;
        padding: 2rem;
      }
      .calendar-day {
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.5s ease;
        height: 120px;
        cursor: pointer;
      }
      .calendar-day:hover {
        transform: translateY(-10px) rotateX(5deg);
      }
      .calendar-day:hover .day-front {
        transform: translateZ(30px);
      }
      .day-front, .day-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        transition: transform 0.5s ease;
        border-radius: 10px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
      }
      .day-front {
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid #e2e8f0;
        z-index: 2;
      }
      .day-back {
        background-color: #f0f4ff;
        transform: rotateY(180deg) translateZ(0);
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        border: 1px solid #d1d8e0;
      }
      .calendar-day:hover .day-back {
        transform: rotateY(180deg) translateZ(10px);
      }
      .day-number {
        font-size: 1.5rem;
        font-weight: 600;
        color: theme('colors.dark');
      }
      .day-events {
        margin-top: 0.5rem;
        display: flex;
        gap: 3px;
      }
      .event-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
      }
      .calendar-day.travel .day-front {
        border: 2px solid theme('colors.primary');
      }
      .calendar-day.festival .day-front {
        border: 2px solid theme('colors.secondary');
      }
      .calendar-day.highlight .day-front {
        border: 2px solid theme('colors.warning');
      }
      .calendar-day.memory .day-front {
        border: 2px solid theme('colors.accent');
      }
      .day-back h4 {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
      }
      .day-back p {
        font-size: 0.8rem;
        color: theme('colors.dark/70');
      }
      .day-decoration {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 0.7rem;
      }
      .memory-card {
        transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
        position: relative;
        overflow: hidden;
        border-radius: 16px;
        transform-style: preserve-3d;
      }
      .memory-card:hover {
        transform: translateY(-8px) rotateX(3deg);
      }
      .memory-card img {
        transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
        border-radius: 16px;
      }
      .memory-card:hover img {
        transform: scale(1.05);
      }
      .memory-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1rem;
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
        transform: translateZ(20px);
        color: white;
        border-radius: 0 0 16px 16px;
      }
      .scroll-indicator {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        animation: bounce 2s infinite;
      }
      @keyframes bounce {
        0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
        40% { transform: translateY(-20px) translateX(-50%); }
        60% { transform: translateY(-10px) translateX(-50%); }
      }
    }
  </style>
</head>
<body class="font-inter bg-gradient-to-br from-neutral to-primary/5 text-dark min-h-screen">
  <!-- 页面容器 -->
  <div id="app" class="min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-md z-50 shadow-sm transition-all duration-300">
      <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <a href="#" class="text-2xl font-bold text-primary flex items-center">
          <i class="fa-solid fa-paper-plane mr-2"></i>
          <span>慢生活</span>
        </a>
        
        <div class="hidden md:flex space-x-8">
          <a href="#" class="nav-link font-medium hover:text-primary transition-colors">首页</a>
          <a href="#" class="nav-link font-medium hover:text-primary transition-colors">旅行足迹</a>
          <a href="#" class="nav-link font-medium hover:text-primary transition-colors">照片墙</a>
          <a href="#" class="nav-link font-medium hover:text-primary transition-colors">视频分享</a>
          <a href="#" class="nav-link font-medium text-primary">日历</a>
        </div>
        
        <div class="md:hidden">
          <button id="menu-toggle" class="text-dark focus:outline-none">
            <i class="fa-solid fa-bars text-xl"></i>
          </button>
        </div>
      </div>
      
      <!-- 移动端菜单 -->
      <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
        <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
          <a href="#" class="py-2 font-medium hover:text-primary transition-colors">首页</a>
          <a href="#" class="py-2 font-medium hover:text-primary transition-colors">旅行足迹</a>
          <a href="#" class="py-2 font-medium hover:text-primary transition-colors">照片墙</a>
          <a href="#" class="py-2 font-medium hover:text-primary transition-colors">视频分享</a>
          <a href="#" class="py-2 font-medium text-primary">日历</a>
        </div>
      </div>
    </nav>
    
    <!-- 页面内容 -->
    <main class="flex-grow pt-16">
      <!-- 日历墙 -->
      <section class="py-16 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-full">
          <div class="absolute -top-20 -left-20 w-60 h-60 bg-primary/5 rounded-full blur-3xl"></div>
          <div class="absolute top-1/3 -right-32 w-80 h-80 bg-secondary/10 rounded-full blur-3xl"></div>
          <div class="absolute -bottom-20 left-1/4 w-72 h-72 bg-accent/5 rounded-full blur-3xl"></div>
        </div>
        
        <div class="container mx-auto px-4 relative">
          <!-- 页面标题 -->
          <div class="text-center mb-12">
            <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-dark mb-4">3D旅行日历</h2>
            <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
            <p class="text-lg text-dark/70 max-w-2xl mx-auto">以立体的方式记录旅行中的每一个重要时刻</p>
          </div>
          
          <!-- 月份导航 -->
          <div class="flex flex-wrap justify-between items-center mb-10">
            <div class="flex items-center space-x-4 mb-4 md:mb-0">
              <button id="prev-month" class="w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center hover:bg-primary hover:text-white transition-all duration-300">
                <i class="fa-solid fa-chevron-left"></i>
              </button>
              <h3 id="current-month" class="text-2xl font-bold">2024年5月</h3>
              <button id="next-month" class="w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center hover:bg-primary hover:text-white transition-all duration-300">
                <i class="fa-solid fa-chevron-right"></i>
              </button>
            </div>
            
            <div class="flex flex-wrap gap-3">
              <div class="bg-white p-2 rounded-lg shadow-sm flex items-center">
                <span class="event-dot bg-primary mr-2"></span>
                <span class="text-sm">旅行计划</span>
              </div>
              <div class="bg-white p-2 rounded-lg shadow-sm flex items-center">
                <span class="event-dot bg-secondary mr-2"></span>
                <span class="text-sm">节日假期</span>
              </div>
              <div class="bg-white p-2 rounded-lg shadow-sm flex items-center">
                <span class="event-dot bg-accent mr-2"></span>
                <span class="text-sm">美好回忆</span>
              </div>
              <div class="bg-white p-2 rounded-lg shadow-sm flex items-center">
                <span class="event-dot bg-warning mr-2"></span>
                <span class="text-sm">重要日期</span>
              </div>
            </div>
          </div>
          
          <!-- 3D日历网格 -->
          <div class="calendar-container mb-16">
            <div class="calendar-grid">
              <!-- 星期标题 -->
              <div class="col-span-7 grid grid-cols-7 gap-1 mb-2">
                <div class="text-center font-medium py-3 bg-white/80 backdrop-blur-sm rounded-xl shadow-sm border border-gray-100 transform translateZ(10px)">周日</div>
                <div class="text-center font-medium py-3 bg-white/80 backdrop-blur-sm rounded-xl shadow-sm border border-gray-100 transform translateZ(10px)">周一</div>
                <div class="text-center font-medium py-3 bg-white/80 backdrop-blur-sm rounded-xl shadow-sm border border-gray-100 transform translateZ(10px)">周二</div>
                <div class="text-center font-medium py-3 bg-white/80 backdrop-blur-sm rounded-xl shadow-sm border border-gray-100 transform translateZ(10px)">周三</div>
                <div class="text-center font-medium py-3 bg-white/80 backdrop-blur-sm rounded-xl shadow-sm border border-gray-100 transform translateZ(10px)">周四</div>
                <div class="text-center font-medium py-3 bg-white/80 backdrop-blur-sm rounded-xl shadow-sm border border-gray-100 transform translateZ(10px)">周五</div>
                <div class="text-center font-medium py-3 bg-white/80 backdrop-blur-sm rounded-xl shadow-sm border border-gray-100 transform translateZ(10px)">周六</div>
              </div>
              
              <!-- 日期 - 4月 -->
              <div class="calendar-day empty">
                <div class="day-front">
                  <div class="day-number text-dark/40">28</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day empty">
                <div class="day-front">
                  <div class="day-number text-dark/40">29</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day empty">
                <div class="day-front">
                  <div class="day-number text-dark/40">30</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day empty">
                <div class="day-front">
                  <div class="day-number text-dark/40">1</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day empty">
                <div class="day-front">
                  <div class="day-number text-dark/40">2</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day empty">
                <div class="day-front">
                  <div class="day-number text-dark/40">3</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <!-- 日期 - 5月 -->
              <div class="calendar-day travel">
                <div class="day-front">
                  <div class="day-number">4</div>
                  <div class="day-events">
                    <span class="event-dot bg-primary"></span>
                  </div>
                  <div class="day-decoration bg-primary">
                    <i class="fa-solid fa-plane-departure"></i>
                  </div>
                </div>
                <div class="day-back">
                  <h4>三亚旅行开始</h4>
                  <p>5天4晚的三亚之旅，开启美好假期</p>
                </div>
              </div>
              
              <div class="calendar-day travel">
                <div class="day-front">
                  <div class="day-number">5</div>
                  <div class="day-events">
                    <span class="event-dot bg-primary"></span>
                  </div>
                  <div class="day-decoration bg-primary">
                    <i class="fa-solid fa-umbrella-beach"></i>
                  </div>
                </div>
                <div class="day-back">
                  <h4>三亚·亚龙湾</h4>
                  <p>享受阳光沙滩，体验水上活动</p>
                </div>
              </div>
              
              <div class="calendar-day travel">
                <div class="day-front">
                  <div class="day-number">6</div>
                  <div class="day-events">
                    <span class="event-dot bg-primary"></span>
                  </div>
                  <div class="day-decoration bg-primary">
                    <i class="fa-solid fa-camera"></i>
                  </div>
                </div>
                <div class="day-back">
                  <h4>南山文化旅游区</h4>
                  <p>参观南海观音像，感受佛教文化</p>
                </div>
              </div>
              
              <div class="calendar-day travel">
                <div class="day-front">
                  <div class="day-number">7</div>
                  <div class="day-events">
                    <span class="event-dot bg-primary"></span>
                  </div>
                  <div class="day-decoration bg-primary">
                    <i class="fa-solid fa-ship"></i>
                  </div>
                </div>
                <div class="day-back">
                  <h4>蜈支洲岛一日游</h4>
                  <p>清澈海水，丰富的海洋生物</p>
                </div>
              </div>
              
              <div class="calendar-day travel">
                <div class="day-front">
                  <div class="day-number">8</div>
                  <div class="day-events">
                    <span class="event-dot bg-primary"></span>
                  </div>
                  <div class="day-decoration bg-primary">
                    <i class="fa-solid fa-sunset"></i>
                  </div>
                </div>
                <div class="day-back">
                  <h4>三亚湾日落</h4>
                  <p>欣赏美丽的海滨日落景色</p>
                </div>
              </div>
              
              <div class="calendar-day travel">
                <div class="day-front">
                  <div class="day-number">9</div>
                  <div class="day-events">
                    <span class="event-dot bg-primary"></span>
                  </div>
                  <div class="day-decoration bg-primary">
                    <i class="fa-solid fa-plane-arrival"></i>
                  </div>
                </div>
                <div class="day-back">
                  <h4>返程</h4>
                  <p>结束愉快的三亚之旅，返回北京</p>
                </div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">10</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">11</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">12</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">13</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">14</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day festival">
                <div class="day-front">
                  <div class="day-number">15</div>
                  <div class="day-events">
                    <span class="event-dot bg-secondary"></span>
                  </div>
                  <div class="day-decoration bg-secondary">
                    <i class="fa-solid fa-utensils"></i>
                  </div>
                </div>
                <div class="day-back">
                  <h4>国际家庭日</h4>
                  <p>与家人共进晚餐，享受温馨时光</p>
                </div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">16</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">17</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">18</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">19</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">20</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day highlight">
                <div class="day-front">
                  <div class="day-number">21</div>
                  <div class="day-events">
                    <span class="event-dot bg-warning"></span>
                  </div>
                  <div class="day-decoration bg-warning">
                    <i class="fa-solid fa-briefcase"></i>
                  </div>
                </div>
                <div class="day-back">
                  <h4>重要会议</h4>
                  <p>上午9点公司季度战略会议</p>
                </div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">22</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">23</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">24</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">25</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day memory">
                <div class="day-front">
                  <div class="day-number">26</div>
                  <div class="day-events">
                    <span class="event-dot bg-accent"></span>
                  </div>
                  <div class="day-decoration bg-accent">
                    <i class="fa-solid fa-camera-retro"></i>
                  </div>
                </div>
                <div class="day-back">
                  <h4>杭州旅行</h4>
                  <p>西湖一日游，感受淡妆浓抹总相宜的美景</p>
                </div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">27</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">28</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">29</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">30</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day">
                <div class="day-front">
                  <div class="day-number">31</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <!-- 6月 -->
              <div class="calendar-day empty">
                <div class="day-front">
                  <div class="day-number text-dark/40">1</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day empty">
                <div class="day-front">
                  <div class="day-number text-dark/40">2</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day empty">
                <div class="day-front">
                  <div class="day-number text-dark/40">3</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day empty">
                <div class="day-front">
                  <div class="day-number text-dark/40">4</div>
                </div>
                <div class="day-back"></div>
              </div>
              
              <div class="calendar-day empty">
                <div class="day-front">
                  <div class="day-number text-dark/40">5</div>
                </div>
                <div class="day-back"></div>
              </div>
            </div>
          </div>
          
          <!-- 本月旅行记忆 -->
          <div class="mt-16">
            <h3 class="text-2xl font-bold text-dark mb-8 text-center">本月旅行记忆</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <!-- 记忆卡片 1 -->
              <div class="memory-card">
                <img src="https://picsum.photos/id/29/600/400" alt="三亚海滩" class="w-full h-64 object-cover">
                <div class="memory-content transform translateZ(10px)">
                  <h4 class="font-semibold text-xl mb-1">三亚·碧海蓝天</h4>
                  <p class="text-sm text-white/80">5月4日 · 三亚湾</p>
                </div>
              </div>
              
              <!-- 记忆卡片 2 -->
              <div class="memory-card">
                <img src="https://picsum.photos/id/42/600/400" alt="三亚美食" class="w-full h-64 object-cover">
                <div class="memory-content transform translateZ(10px)">
                  <h4 class="font-semibold text-xl mb-1">三亚·海鲜盛宴</h4>
                  <p class="text-sm text-white/80">5月6日 · 第一市场</p>
                </div>
              </div>
              
              <!-- 记忆卡片 3 -->
              <div class="memory-card">
                <img src="https://picsum.photos/id/65/600/400" alt="三亚日落" class="w-full h-64 object-cover">
                <div class="memory-content transform translateZ(10px)">
                  <h4 class="font-semibold text-xl mb-1">三亚·美丽日落</h4>
                  <p class="text-sm text-white/80">5月8日 · 三亚湾</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-dark text-white py-10">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <h3 class="text-xl font-bold mb-4">慢生活</h3>
            <p class="text-white/70 mb-4">记录旅行中的美好瞬间，分享生活的点滴</p>
            <div class="flex space-x-4">
              <a href="#" class="text-white/70 hover:text-white transition-colors">
                <i class="fa-brands fa-weibo"></i>
              </a>
              <a href="#" class="text-white/70 hover:text-white transition-colors">
                <i class="fa-brands fa-wechat"></i>
              </a>
              <a href="#" class="text-white/70 hover:text-white transition-colors">
                <i class="fa-brands fa-instagram"></i>
              </a>
              <a href="#" class="text-white/70 hover:text-white transition-colors">
                <i class="fa-brands fa-twitter"></i>
              </a>
            </div>
          </div>
          
          <div>
            <h3 class="text-lg font-semibold mb-4">快速链接</h3>
            <ul class="space-y-2">
              <li><a href="#" class="text-white/70 hover:text-white transition-colors">首页</a></li>
              <li><a href="#" class="text-white/70 hover:text-white transition-colors">旅行足迹</a></li>
              <li><a href="#" class="text-white/70 hover:text-white transition-colors">照片墙</a></li>
              <li><a href="#" class="text-white/70 hover:text-white transition-colors">视频分享</a></li>
              <li><a href="#" class="text-white/70 hover:text-white transition-colors">日历</a></li>
            </ul>
          </div>
          
          <div>
            <h3 class="text-lg font-semibold mb-4">热门目的地</h3>
            <ul class="space-y-2">
              <li><a href="#" class="text-white/70 hover:text-white transition-colors">三亚</a></li>
              <li><a href="#" class="text-white/70 hover:text-white transition-colors">杭州</a></li>
              <li><a href="#" class="text-white/70 hover:text-white transition-colors">成都</a></li>
              <li><a href="#" class="text-white/70 hover:text-white transition-colors">丽江</a></li>
              <li><a href="#" class="text-white/70 hover:text-white transition-colors">厦门</a></li>
            </ul>
          </div>
          
          <div>
            <h3 class="text-lg font-semibold mb-4">联系我们</h3>
            <ul class="space-y-2">
              <li class="flex items-start">
                <i class="fa-solid fa-map-marker-alt mt-1 mr-3 text-white/70"></i>
                <span class="text-white/70">北京市朝阳区建国路88号</span>
              </li>
              <li class="flex items-start">
                <i class="fa-solid fa-phone mt-1 mr-3 text-white/70"></i>
                <span class="text-white/70">+86 10 8888 8888</span>
              </li>
              <li class="flex items-start">
                <i class="fa-solid fa-envelope mt-1 mr-3 text-white/70"></i>
                <span class="text-white/70">contact@manlife.com</span>
              </li>
            </ul>
          </div>
        </div>
        
        <div class="border-t border-white/10 mt-8 pt-8 text-center text-white/50 text-sm">
          <p>&copy; 2024 慢生活 · 旅行日记. 保留所有权利.</p>
        </div>
      </div>
    </footer>
  </div>
  
  <script>
    // 移动端菜单切换
    document.getElementById('menu-toggle').addEventListener('click', function() {
      const mobileMenu = document.getElementById('mobile-menu');
      mobileMenu.classList.toggle('hidden');
    });
    
    // 月份切换功能
    document.getElementById('prev-month').addEventListener('click', function() {
      const currentMonthEl = document.getElementById('current-month');
      const currentMonthText = currentMonthEl.textContent;
      const [year, month] = currentMonthText.split('年').map(part => parseInt(part));
      
      let newMonth = month - 1;
      let newYear = year;
      
      if (newMonth < 1) {
        newMonth = 12;
        newYear--;
      }
      
      currentMonthEl.textContent = `${newYear}年${newMonth}月`;
      // 这里可以添加日历数据更新逻辑
    });
    
    document.getElementById('next-month').addEventListener('click', function() {
      const currentMonthEl = document.getElementById('current-month');
      const currentMonthText = currentMonthEl.textContent;
      const [year, month] = currentMonthText.split('年').map(part => parseInt(part));
      
      let newMonth = month + 1;
      let newYear = year;
      
      if (newMonth > 12) {
        newMonth = 1;
        newYear++;
      }
      
      currentMonthEl.textContent = `${newYear}年${newMonth}月`;
      // 这里可以添加日历数据更新逻辑
    });
    
    // 滚动时导航栏效果
    window.addEventListener('scroll', function() {
      const nav = document.querySelector('nav');
      if (window.scrollY > 50) {
        nav.classList.add('py-2');
        nav.classList.remove('py-4');
        nav.classList.add('shadow-md');
      } else {
        nav.classList.add('py-4');
        nav.classList.remove('py-2');
        nav.classList.remove('shadow-md');
      }
    });
  </script>
</body>
</html>